<template>
  <div class="lunck">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="地址">
        <el-input v-model="formInline.address" placeholder="地址"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <UseTable
      :tableData="tableDataShow"
      :columnList="columnList"
      :iSOnlyShow="iSOnlyShow"
    ></UseTable>
  </div>
</template>

<script>
import UseTable from "../components/UseTable.vue";
import { listDbTable } from "../api/list";
export default {
  components: {
    UseTable,
  },
  created() {
    // 调用接口
    listDbTable({
      url: "https://www.cnblogs.com/",
    }).then((res) => {
      console.log("111", res);
    });
  },

  data() {
    return {
      formInline: {
        address: "",
      },
      //表格数据
      tableData: [
        {
          date: "2016-05-02",
          name: "一二",
          address: "一二",
        },
        {
          date: "2016-05-04",
          name: "布布",
          address: "布布",
        },
      ],

      //表格数据
      tableDataShow: [
        {
          date: "2016-05-02",
          name: "一二",
          address: "一二",
        },
        {
          date: "2016-05-04",
          name: "布布",
          address: "布布",
        },
      ],
      //表格列
      columnList: [
        {
          prop: "date",
          label: "日期",
        },
        {
          prop: "address",
          label: "地址",
        },
      ],

      //展示按钮
      iSOnlyShow: false,
    };
  },
  methods: {
    onSubmit() {
      let list = [...this.tableData];
      let newList = list.filter((item) => {
        return item.address.includes(this.formInline.address);
      });

      this.tableDataShow = newList;
    },
  },
};
</script>
<style scoped>
.lunck {
  width: 100%;
  /* height: 600px; */
}
</style>
